<template>
  <div class="html1_8">
      <h1>1.8 HTML5的多媒体交互标签</h1>
      <div class="html1_8_1">
        <h2>1.8.1 video 标签</h2>
        <p>
          <pre>
            定义和用法
&lt;video> 标签定义视频，比如电影片段或其他视频流。
提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
&lt;video>有以下属性
          </pre>
        </p>
        <p class="tab">表2-8   video 标签常用的属性和取值</p>
        <table border="1px">
          <tr>
            <th>属性</th>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>autoplay</td>
            <td>autoplay</td>
            <td>如果出现该属性，则视频在就绪后马上播放。</td>
          </tr>
          <tr>
            <td>controls</td>
            <td>controls</td>
            <td>如果出现该属性，则向用户显示控件，比如播放按钮</td>
          </tr>
          <tr>
            <td>height</td>
            <td>pixels</td>
            <td>设置视频播放器的高度。</td>
          </tr>
          <tr>
            <td>loop</td>
            <td>loop</td>
            <td>如果出现该属性，则当媒介文件完成播放后再次开始播放。</td>
          </tr>
          <tr>
            <td>muted</td>
            <td>muted</td>
            <td>规定视频的音频输出应该被静音。</td>
          </tr>
          <tr>
            <td>poster</td>
            <td>URL</td>
            <td>规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。</td>
          </tr>
          <tr>
            <td>preload</td>
            <td>preload</td>
            <td>如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。</td>
          </tr>
          <tr>
            <td>src</td>
            <td>url</td>
            <td>要播放的视频的 URL。</td>
          </tr>
          <tr>
            <td>width</td>
            <td>pixels</td>
            <td>设置视频播放器的宽度。</td>
          </tr>
        </table>
        <p>
          <pre>
            实例：
&lt;video  controls="controls" src="Source/movie.ogg">
			当前浏览器不支持 video直接播放
&lt;/video>
          </pre>
        </p>
        <img src="../assets/images/2.37.png" alt="">
        <p>图2.8.1  video标签实例</p>
      </div>
      <div class="html1_8_2">
        <h2>1.8.2audio标签</h2>
        <p>
          <pre>
            定义和用法
&lt;audio> 标签定义声音，比如音乐或其他音频流
提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
audio有以下属性
          </pre>
        </p>
        <p class="tab">表2-8   audio标签常用的属性和取值</p>
        <table border="1px">
          <tr>
            <th>属性</th>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>autoplay</td>
            <td>autoplay</td>
            <td>如果出现该属性，则音频在就绪后马上播放。</td>
          </tr>
          <tr>
            <td>controls</td>
            <td>controls</td>
            <td>如果出现该属性，则向用户显示控件，比如播放按钮。</td>
          </tr>
          <tr>
            <td>loop</td>
            <td>loop</td>
            <td>如果出现该属性，则每当音频结束时重新开始播放。</td>
          </tr>
          <tr>
            <td>muted</td>
            <td>muted</td>
            <td>规定视频输出应该被静音</td>
          </tr>
          <tr>
            <td>preload</td>
            <td>preload</td>
            <td>如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。</td>
          </tr>
          <tr>
            <td>src</td>
            <td>url</td>
            <td>要播放的音频的 URL。</td>
          </tr>
        </table>
        <p>
          <pre>
            实例：
&lt;audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
&lt;/audio>
          </pre>
        </p>
      </div>
      <div class="html1_8_3">
        <h2>1.8.3 source标签</h2>
        <p>
          <pre>
            定义和用法
&lt;source> 标签为媒介元素（比如&lt;video>和&lt;audio>）定义媒介资源。&lt;source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
&lt;source>有以下属性
          </pre>
        </p>
        <p class="tab">表2-8   source标签常用的属性和取值</p>
        <table border="1px">
          <tr>
            <th>属性</th>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>media</td>
            <td>media query</td>
            <td>规定媒体资源的类型</td>
          </tr>
          <tr>
            <td>src</td>
            <td>url</td>
            <td>规定媒体文件的 URL。</td>
          </tr>
          <tr>
            <td>type</td>
            <td>numeric value</td>
            <td>规定媒体资源的 MIME 类型</td>
          </tr>
        </table>
        <p>
          <pre>
            实例：
拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）：
&lt;audio controls>
   &lt;source src="horse.ogg" type="audio/ogg">
   &lt;source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
&lt;/audio> 
          </pre>
        </p>
      </div>
      <div class="html1_8_4">
        <h2>1.8.4 canvas标签</h2>
        <p>
          <pre>
            定义和用法
&lt;canvas> 标签定义图形，比如图表和其他图像。&lt;canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
          </pre>
        </p>
        <p class="tab">表2-8  canvas标签常用的属性和取值</p>
        <table border="1px">
          <tr>
            <th>属性</th>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>height</td>
            <td>pixels</td>
            <td>设置 canvas 的高度。</td>
          </tr>
          <tr>
            <td>width</td>
            <td>pixels</td>
            <td>设置 canvas 的宽度。</td>
          </tr>
        </table>
        <p>
          <pre>
            实例：
&lt;canvas id="myCanvas">&lt;/canvas>
    &lt;script type="text/javascript">
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(0, 0, 80, 100);
    &lt;/script>
          </pre>
        </p>
        <img src="../assets/images/2.38.png" alt="">
        <p>图2.8.4  canvas标签实例</p>
      </div>
      <div class="html1_8_5">
        <h2>1.8.5 embed标签</h2>
        <p>
          <pre>
            定义和用法
&lt;embed> 标签定义嵌入的内容，比如插件。
          </pre>
        </p>
        <p class="tab">表2-8   embed标签常用的属性和取值</p>
        <table border="1px">
          <tr>
            <th>属性</th>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>height</td>
            <td>pixels</td>
            <td>设置嵌入内容的高度。</td>
          </tr>
          <tr>
            <td>src</td>
            <td>url</td>
            <td>嵌入内容的 URL。</td>
          </tr>
          <tr>
            <td>type</td>
            <td>type</td>
            <td>定义嵌入内容的类型。</td>
          </tr>
          <tr>
            <td>width</td>
            <td>pixels</td>
            <td>设置嵌入内容的宽度。</td>
          </tr>
        </table>
        <p>
          <pre>
            实例：
 &lt;embed src="./1.png" type="" />
          </pre>
        </p>
        <img src="../assets/images/2.39.png" alt="">
        <p>图2.8.5 embed标签实例</p>
      </div>
      <div class="html1_8_6">
        <h2>1.8.6 track标签</h2>
        <p>
          <pre>
            定义和用法
&lt;track> 标签为媒体元素（比如&lt;audio>and&lt;video>）规定外部文本轨道。这个元素用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。
          </pre>
        </p>
        <p class="tab">表2-8   track标签常用的属性和取值</p>
        <table border="1px">
          <tr>
            <th>属性</th>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>default</td>
            <td>default</td>
            <td>规定该轨道是默认的，假如没有选择任何轨道。</td>
          </tr>
          <tr>
            <td>kind</td>
            <td>captions/chapters/descriptions/metadata/subtitles</td>
            <td>表示轨道属于什么文本类型。</td>
          </tr>
          <tr>
            <td>label</td>
            <td>label</td>
            <td>轨道的标签或标题。</td>
          </tr>
          <tr>
            <td>src</td>
            <td>url</td>
            <td>轨道的标签或标题</td>
          </tr>
          <tr>
            <td>srclang</td>
            <td>language_code</td>
            <td>轨道的语言，若 kind 属性值是 "subtitles"，则该属性必需的。</td>
          </tr>
        </table>
        <p>
          <pre>
            实例:
播放带有字幕的视频：
&lt;video width="320" height="240" controls="controls">
        &lt;source src="forrest_gump.mp4" type="video/mp4" />
        &lt;source src="forrest_gump.ogg" type="video/ogg" />
        &lt;track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
        &lt;track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
 &lt;/video>
          </pre>
        </p>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>